<!-- 传入tovalue -->
<!-- 传出toPage -->
<!-- <bottom-pagination :tovalue="[blog.pageSize, blog.count, blog.page]" @revalue="toPage" :key="componentKey">
</bottom-pagination> -->

<template>
    <!-- 鼠标检索 -->
    <div class="pagination__delivery--seize" v-if="click_state">
        <div>
            <div @click="checkClick"></div>
        </div>
    </div>

    <div class="pagination">
        <div class="pagination__button">
            <!-- <Transition> -->
            <div>
                <div class="llbtn" @click="jumpCount('start')">&lt;&lt;</div>

                <div class="lbtn" @click="jumpCount('front')">&lt;</div>

                <div
                    class="num"
                    :class="{
                        'pagination__button_num--t': activeCount.value === 'a',
                        'pagination__button_count--f': !pageCount.a,
                    }"
                    @click="jumpPage('a')"
                >
                    {{ head_page }}
                </div>
                <div
                    class="num"
                    :class="{
                        'pagination__button_num--t': activeCount.value === 'b',
                        'pagination__button_count--f': !pageCount.b,
                    }"
                    @click="jumpPage('b')"
                >
                    {{ head_page + 1 }}
                </div>
                <div
                    class="num"
                    :class="{
                        'pagination__button_num--t': activeCount.value === 'c',
                        'pagination__button_count--f': !pageCount.c,
                    }"
                    @click="jumpPage('c')"
                >
                    {{ head_page + 2 }}
                </div>
                <div
                    class="num"
                    :class="{
                        'pagination__button_num--t': activeCount.value === 'd',
                        'pagination__button_count--f': !pageCount.d,
                    }"
                    @click="jumpPage('d')"
                >
                    {{ head_page + 3 }}
                </div>
                <div
                    class="num"
                    :class="{
                        'pagination__button_num--t': activeCount.value === 'e',
                        'pagination__button_count--f': !pageCount.e,
                    }"
                    @click="jumpPage('e')"
                >
                    {{ head_page + 4 }}
                </div>

                <div class="rbtn" @click="jumpCount('rear')">&gt;</div>

                <div class="rrbtn" @click="jumpCount('end')">&gt;&gt;</div>

                <div class="delivery" @click="deliveryPage">
                    <div class="pagination__button_message" v-if="!click_state">
                        {{ getBuffer_num() }}/{{ page_count }}&nbsp;Page
                    </div>
                    <div v-if="click_state">
                        <input
                            type="number"
                            ref="delivery"
                            class="pagination__button_delivery"
                            @input="infoDelivery_count"
                            :placeholder="'?/' + page_count + ' Page'"
                            @keyup.enter="checkClick"
                        />
                    </div>
                </div>
            </div>
            <!-- </Transition> -->
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onUpdated, reactive, nextTick } from "vue";

// 获取参数
const props = defineProps(["tovalue"]);
const emits = defineEmits(["revalue"]);

onUpdated(() => {
    getPage_and_Count();
});

const page_count = ref(1); // 分页数量
function getPage_and_Count() {
    // 如果数据不存在 则直接涂灰
    if (!props.tovalue[1]) {
        applyCount(0);
        return;
    }

    // 获取分页数量
    let k = props.tovalue[1] % props.tovalue[0];
    if (k === 0) {
        page_count.value = props.tovalue[1] / props.tovalue[0];
    } else {
        page_count.value = (props.tovalue[1] - k) / props.tovalue[0] + 1;
    }

    // 获取剩余页数
    // 获取页面数
    let j = page_count.value % 5;
    if (j === 0) {
        // 如果整除 则没有剩余页数
        pageCount.surplus = 0;
        pageCount.value = (page_count.value - j) / 5;
    } else {
        pageCount.surplus = j;
        pageCount.value = (page_count.value - j) / 5 + 1;
    }
    if (pageCount.value === 1 && j !== 0) {
        // 如果活动页数为1 并且有剩余页数 则抹灰剩余页数
        applyCount(pageCount.surplus);
    }
}

// 活动页数
const pageCount = reactive({
    a: true,
    b: true,
    c: true,
    d: true,
    e: true,
    surplus: 0, // 剩余页数
    value: 1, // 当前活动页数
});
// 涂灰剩余页数
function applyCount(index) {
    // console.log("余数为",index);
    switch (index + 1) {
        case 1:
            pageCount.a = false;
        case 2:
            pageCount.b = false;
        case 3:
            pageCount.c = false;
        case 4:
            pageCount.d = false;
        case 5:
            pageCount.e = false;
    }
}
// 归位函数 取消涂灰
function returnCount() {
    pageCount.a = true;
    pageCount.b = true;
    pageCount.c = true;
    pageCount.d = true;
    pageCount.e = true;
}

// 霰弹跳转
const jumpCount = (index) => {
    // debugger
    switch (index) {
        case "start":
            activeCount.value = null;
            head_page.value = 1;
            returnCount();
            break;
        case "end":
            if (head_page.value < (pageCount.value - 1) * 5 + 1) {
                activeCount.value = null;
                head_page.value = (pageCount.value - 1) * 5 + 1;
                applyCount(pageCount.surplus);
            }
            break;
        case "front":
            if (head_page.value > 1) {
                activeCount.value = null;
                head_page.value = head_page.value - 5;
                returnCount();
            }
            break;
        case "rear":
            // 如果在范围内
            if (head_page.value < (pageCount.value - 1) * 5 + 1) {
                activeCount.value = null;
                head_page.value = head_page.value + 5;

                // 若下一个就无了 使用涂灰
                if (head_page.value + 5 > (pageCount.value - 1) * 5 + 1) {
                    applyCount(pageCount.surplus);
                }
            }
            // else {
            //     activeCount.value = null;
            //     applyCount(pageCount.surplus);
            // }
            break;
    }

    // 如果是活动项对应的头页则展示
    if (head_page.value === activeCount.buffer_count) {
        activeCount.value = activeCount.buffer_index;
    }
};

const head_page = ref(1); // 头页位置
const activeCount = reactive({
    value: "a",
    buffer_index: "a", // 当前活动索引
    buffer_count: 1, // 当前活动索引对应头页
});
// 左轮跳转
const jumpPage = (index) => {
    // 获取当前活动页面的头页位置
    activeCount.buffer_count = head_page.value;
    // 进行跳转
    switch (index) {
        case "a":
            switch_JumpPage("a");
            break;
        case "b":
            switch_JumpPage("b");
            break;
        case "c":
            switch_JumpPage("c");
            break;
        case "d":
            switch_JumpPage("d");
            break;
        case "e":
            switch_JumpPage("e");
            break;
    }
};
function switch_JumpPage(index) {
    // 如果是第二次点击 则跳转到上部
    if (activeCount.value === index) {
        activeCount.value = null;
        setTimeout(() => {
            activeCount.value = index;
        }, 1);
        // window.scrollTo({
        //     bottom: 0,
        //     top: 480,
        //     behavior: "smooth"  // 平滑滚动
        // })
        return;
    }

    activeCount.value = index; // 获取活动项索引
    activeCount.buffer_index = index; // 缓存活动项

    deliveryCount.value = getBuffer_num();
    props.tovalue[2] = getBuffer_num();
    // 发送事件
    emits("revalue", props.tovalue[2]);
}

const delivery = ref(); // 传送框id
const deliveryCount = ref(1); // 传送页数
// 页面传送
const deliveryPage = () => {
    click_state.value = true;

    nextTick(() => {
        // 监听DOM更新以确保页面种存在input
        setTimeout(() => {
            delivery.value.focus();
            // click_state.value = true
        }, 1);
    });
};

// 点击事件检测
const click_state = ref(false);
const BUFFER_INDEX_NUM = {
    1: "a",
    2: "b",
    3: "c",
    4: "d",
    0: "e",
};
const checkClick = () => {
    // 关闭检测
    click_state.value = false;

    if (0 < deliveryCount.value && page_count.value >= deliveryCount.value) {
        // 跳转到对应页面
        console.log(1);

        // 设置头页值
        let k = deliveryCount.value % 5;

        if (k !== 0) {
            head_page.value = ((deliveryCount.value - k) / 5) * 5 + 1;
        } else {
            head_page.value = (deliveryCount.value / 5 - 1) * 5 + 1;
        }

        // 进行跳转
        jumpPage(BUFFER_INDEX_NUM[k]);
    } else if (0 >= deliveryCount.value) {
        // 跳转到首页
        console.log("跳转到首页");
        deliveryCount.value = 1;
        jumpCount("start");
    } else if (page_count.value < deliveryCount.value) {
        // 跳转到尾页
        console.log("跳转到尾页");
        deliveryCount.value = page_count.value;
        jumpCount("end");
    } else {
        return;
    }

    if (deliveryCount.value <= 5) {
        returnCount();
    } else if (deliveryCount.value - head_page.value < 5) {
        applyCount(pageCount.surplus);
    }
};
// 获取input
const infoDelivery_count = (e) => {
    deliveryCount.value = e.target.value;
};

const BUFFER_NUM_INDEX = {
    a: 0,
    b: 1,
    c: 2,
    d: 3,
    e: 4,
};
// 获取当前活动项页数
const getBuffer_num = () => {
    let o = BUFFER_NUM_INDEX[activeCount.buffer_index];
    return activeCount.buffer_count + o;
};
</script>

<style lang="scss" scoped>
// 传送框
@keyframes agination__button_delivery--t {
    0% {
        transform: scale(1, 0);
    }

    80% {
        transform: scale(1.2, 1.6);
    }

    100% {
        left: 0;
        transform: scale(1, 1);
    }
}

.pagination__button_delivery {
    animation-name: agination__button_delivery--t;
    animation-duration: 0.1s;
    margin: 0 auto;
}

@keyframes agination__button_message--t {
    0% {
        transform: scale(1, 0);
    }

    80% {
        transform: scale(1.2, 1.6);
    }

    100% {
        transform: scale(1, 1);
    }
}

.pagination__button_message {
    animation-name: agination__button_message--t;
    animation-duration: 0.2s;
    width: 100px;
}

// 传送框点击检测
.pagination__delivery--seize {
    position: fixed;
    top: 0;
    left: 0;

    div {
        width: calc(100vw);
        height: calc(100vh);
    }
}

// 涂抹剩余页数
.pagination__button_count--f {
    pointer-events: none;
    color: #dfdfdf;
}

// 分页按钮
@keyframes pagination__button_num--t {
    0% {
        font-size: 40px;
    }

    40% {
        font-size: 80px;
        font-weight: 100;
    }

    100% {
        font-size: 16px;
        font-weight: 800;
    }
}

.pagination__button_num--t {
    animation-name: pagination__button_num--t;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    color: var(--main-color-a);
}

// 整体样式
.pagination {
    margin-top: -14px;

    .pagination__button {
        width: 480px;
        margin: 0 auto;

        div {
            user-select: none;
            display: flex;
            align-items: center;

            .llbtn,
            .lbtn,
            .rbtn,
            .rrbtn {
                flex: 2;
                cursor: pointer;
                font-size: 16px;
                font-weight: 100;
            }

            .llbtn:hover,
            .lbtn:hover,
            .rbtn:hover,
            .rrbtn:hover {
                font-size: 18px;
                color: var(--main-color-a);
            }

            .num {
                flex: 3;
                cursor: pointer;
                font-size: 40px;
                font-weight: 100;
            }

            .num:hover {
                color: var(--main-color-a);
            }

            .delivery {
                flex: 1;
                cursor: pointer;
                font-weight: 100;
                font-size: 20px;

                input {
                    width: 80px;
                    border: 0px;
                    font-size: 20px;
                    font-weight: 100;
                    color: var(--main-color-a);
                    text-align: center;
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    font-weight: 100;
                    color: #dfdfdf;
                }

                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
            }

            .delivery:hover {
                color: var(--main-color-a);
            }
        }
    }
}
</style>
